<template>
  <div class="company-apps">
    <div class="apps-types">
      <el-select v-model="curType" filterable placeholder="请选择应用类型"
                 clearable
                 @clear="onClear"
                 @change="onSel">
        <el-option
            v-for="(item, index) in options"
            :key="index + item.type"
            :label="item.type"
            :value="item.type"
        />
      </el-select>
    </div>
    <div class="apps-table">
      <el-table :data="appList" border stripe style="width: 100%; margin-top: 10px; height: 305px">
        <!--    <el-table-column fixed type="expand" prop="originalName" label="文件名称" width="180">-->
        <el-table-column prop="name" label="应用" show-overflow-tooltip/>
        <el-table-column prop="desc" label="描述" show-overflow-tooltip/>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="toLink(scope.row)">快速前往</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>


<script lang="ts">
import {ref} from 'vue'
import apps from './apps.json'

export default {
  name: 'companyApps',
  setup() {
    interface App {
      type?: string,
      apps?: Array<object>
    }
    /* 数据源 */
    const appAll: Array<object> = apps
    const curType = ref<string>('')
    const options = ref([
        ...appAll
    ])
    const appList = ref<object>([])
    const onSel = (sel: string) => {
      const item: App = appAll.find((app: App) => app.type === sel) || {}
      appList.value = [
        ...(item.apps || [])
      ]
    }
    const onClear = () => {
      appList.value = []
    }
    const toLink = (row: any) => {
      window.open(row.url)
    }
    (() => {
      const first: App = appAll[0] || {}
      curType.value = first.type || ''
      appList.value = [
          ...(first.apps || [])
      ]
    })()
    return {
      curType,
      options,
      appList,
      onSel,
      onClear,
      toLink
    }
  }
}
</script>

<style lang="scss">
.company-apps {
  margin: 0 auto;
}
</style>
